<!-- 博客详情页面 - 展示博客文章的详细内容，包括文章信息、评论系统和相关文章推荐 -->
<template>
  <div class="blog-detail">
    <!-- 统一导航栏组件 -->
    <AppHeader />

    <main class="main-content">
      <!-- 面包屑导航 - 显示页面层级路径 -->
      <div class="breadcrumb">
        <router-link to="/" class="breadcrumb-item">首页</router-link>
        <span class="breadcrumb-separator">/</span>
        <router-link to="/blog" class="breadcrumb-item">博客</router-link>
        <span class="breadcrumb-separator">/</span>
        <router-link :to="`/blog?category=${blogPost.category}`" class="breadcrumb-item">{{ blogPost.category
        }}</router-link>
        <span class="breadcrumb-separator">/</span>
        <router-link :to="`/blog?category=${blogPost.category}&subcategory=${blogPost.subcategory}`"
          class="breadcrumb-item">{{ blogPost.subcategory }}</router-link>
        <span class="breadcrumb-separator">/</span>
        <span class="breadcrumb-current">{{ blogPost.title }}</span>
      </div>

      <!-- 文章主体内容区域 -->
      <div class="article-container">
        <!-- 文章头部信息 - 包含标题、元数据和标签 -->
        <div class="article-header">
          <h1 class="article-title">{{ blogPost.title }}</h1>
          <div class="article-meta">
            <!-- 发布时间 -->
            <div class="meta-item">
              <el-icon>
                <Calendar />
              </el-icon>
              <span>{{ blogPost.date }}</span>
            </div>

            <!-- 阅读次数 -->
            <div class="meta-item">
              <el-icon>
                <View />
              </el-icon>
              <span>{{ blogPost.views }} 次阅读</span>
            </div>
            <!-- 评论数量 -->
            <div class="meta-item">
              <el-icon>
                <ChatDotRound />
              </el-icon>
              <span>{{ blogPost.comments.length }} 条评论</span>
            </div>
          </div>
          <!-- 文章标签列表 -->
          <div class="article-tags">
            <span v-for="tag in blogPost.tags" :key="tag" class="tag" @click="handleArticleTagClick(tag)">
              {{ tag }}
            </span>
          </div>
        </div>

        <!-- 文章正文内容 -->
        <div class="article-content">
          <div class="content-text" v-html="blogPost.content"></div>
        </div>

        <!-- 文章操作按钮 - 点赞和分享 -->
        <div class="article-actions">
          <button class="action-btn like-btn" :class="{ liked: blogPost.isLiked }" @click="toggleLike">
            <el-icon>
              <User />
            </el-icon>
            <span>{{ blogPost.likes }}</span>
          </button>
          
          <!-- 分享按钮容器 -->
          <div class="share-container" :class="{ 'share-expanded': isShareExpanded }">
            <button class="action-btn share-btn" @click="toggleShareMenu" @click.stop>
            <el-icon>
              <Share />
            </el-icon>
            <span>分享</span>
          </button>
            
            <!-- 分享菜单 -->
            <div class="share-menu" v-show="isShareExpanded">
              <div class="share-options">
                <!-- QQ分享 -->
                <button class="share-option qq-share" @click="shareToQQ">
                  <div class="share-icon">
                    <el-icon>
                      <ChatDotRound />
                    </el-icon>
                  </div>
                  <span>QQ</span>
                </button>
                
                <!-- 微信分享 -->
                <button class="share-option wechat-share" @click="shareToWeChat">
                  <div class="share-icon">
                    <el-icon>
                      <ChatDotRound />
                    </el-icon>
                  </div>
                  <span>微信</span>
                </button>
                
                <!-- 复制链接 -->
                <button class="share-option copy-link" @click="copyArticleLink">
                  <div class="share-icon">
                    <el-icon>
                      <Link />
                    </el-icon>
                  </div>
                  <span>复制链接</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 相关文章推荐区域 -->
        <div class="related-articles">
          <h3 class="section-title">相关文章</h3>
          <div class="related-list">
            <!-- 相关文章列表，循环渲染推荐的文章 -->
            <div v-for="article in relatedArticles" :key="article.id" class="related-item"
              @click="navigateToArticle(article.id)">
              <div class="related-image">
                <img :src="article.cover" :alt="article.title" />
              </div>
              <div class="related-info">
                <h4 class="related-title">{{ article.title }}</h4>
                <p class="related-excerpt">{{ article.excerpt }}</p>
                <div class="related-meta">
                  <span>{{ article.date }}</span>
                  <span>{{ article.views }} 阅读</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 评论系统区域 -->
        <div class="comments-section">
          <h3 class="section-title">评论 ({{ blogPost.comments.length }})</h3>

          <!-- 未登录状态显示登录提示 -->
          <div v-if="!isUserLoggedIn" class="login-prompt">
            <div class="login-prompt-content">
              <div class="login-icon">
                <el-icon>
                  <User />
                </el-icon>
              </div>
              <div class="login-info">
                <h4>登录后参与评论</h4>
                <p>请先登录您的账户，然后分享您的想法和见解</p>
              </div>
              <div class="login-actions">
                <button class="login-btn primary" @click="goToLogin">
                  <el-icon>
                    <User />
                  </el-icon>
                  立即登录
                </button>
              </div>
            </div>
          </div>

          <!-- 已登录状态显示评论表单 -->
          <div v-else class="comment-form">
            <div class="form-header">
                              <img :src="userInfo?.avatar || '/src/assets/pic/avatar.jpg'" alt="用户头像" class="user-avatar" />
              <div class="form-info">
                <h4>发表评论</h4>
                <p>欢迎回来，{{ userInfo?.username || '用户' }}！分享你的想法和见解</p>
              </div>
            </div>
            <div class="form-content">
              <el-input v-model="newComment" type="textarea" :rows="4" placeholder="写下你的评论..."
                class="comment-textarea" />
              <div class="form-actions">
                <button class="submit-btn" @click="submitComment" :disabled="!newComment.trim()">
                  发表评论
                </button>
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <!-- 评论项，循环渲染所有评论 -->
            <div v-for="comment in blogPost.comments" :key="comment.id" class="comment-item">
              <div class="comment-avatar">
                <img :src="comment.avatar" :alt="comment.author" />
              </div>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-author">{{ comment.author }}</span>
                  <span class="comment-date">{{ comment.date }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-actions">
                  <!-- 评论点赞按钮 -->
                  <button class="comment-action" @click="likeComment(comment.id)">
                    <el-icon>
                      <User />
                    </el-icon>
                    <span>{{ comment.likes }}</span>
                  </button>
                  <!-- 评论回复按钮 -->
                  <button class="comment-action" @click="replyToComment(comment.id)">
                    <el-icon>
                      <ChatDotRound />
                    </el-icon>
                    <span>回复</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 侧边栏 - 包含目录、文章信息和热门标签 -->
      <aside class="sidebar">
        <!-- 文章目录卡片 -->
        <div class="toc-card">
          <h3 class="card-title">目录</h3>
          <nav class="toc-nav">
            <!-- 目录导航项，支持滚动高亮 -->
            <a v-for="heading in tableOfContents" :key="heading.id" :href="`#${heading.id}`" class="toc-item"
              :class="{ active: activeHeading === heading.id }">
              {{ heading.title }}
            </a>
          </nav>
        </div>

        <!-- 文章信息卡片 -->
        <div class="info-card">
          <h3 class="card-title">文章信息</h3>
          <div class="info-list">
            <!-- 发布时间信息 -->
            <div class="info-item">
              <span class="info-label">发布时间</span>
              <span class="info-value">{{ blogPost.date }}</span>
            </div>
            <!-- 阅读时间信息 -->
            <div class="info-item">
              <span class="info-label">阅读时间</span>
              <span class="info-value">{{ blogPost.readTime }} 分钟</span>
            </div>
            <!-- 字数统计信息 -->
            <div class="info-item">
              <span class="info-label">字数统计</span>
              <span class="info-value">{{ blogPost.wordCount }} 字</span>
            </div>
            <!-- 分类信息 -->
            <div class="info-item">
              <span class="info-label">分类</span>
              <span class="info-value">{{ blogPost.category }}</span>
            </div>
          </div>
        </div>

        <!-- 热门标签卡片 -->
        <div class="tags-card">
          <h3 class="card-title">热门标签</h3>
          <div class="tags-list">
            <!-- 热门标签列表，支持点击跳转 -->
            <span v-for="tag in popularTags" :key="tag.name" class="tag-item" @click="handleTagClick(tag.name)">
              {{ tag.name }}
            </span>
          </div>
        </div>
      </aside>
    </main>

    <!-- 统一页脚组件 -->
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据、计算属性、生命周期钩子
import { ref, computed, onMounted, onUnmounted } from 'vue'
// Vue Router - 提供路由导航和路由参数获取功能
import { useRoute, useRouter } from 'vue-router'

// Element Plus 图标组件 - 用于界面图标显示
import {
  Calendar,      // 日历图标，用于显示发布时间
  User,          // 用户图标，用于点赞和用户相关功能
  View,          // 查看图标，用于显示阅读次数
  ChatDotRound,  // 聊天图标，用于评论功能
  Share,         // 分享图标，用于分享功能
  Link           // 链接图标，用于复制链接
} from '@element-plus/icons-vue'

// Element Plus 消息组件
import { ElMessage } from 'element-plus'

// API工具函数导入
import { get, post } from '../utils/api'
import { API_PATHS } from '../constants/api'

// 微信JS-SDK类型声明
declare global {
  interface Window {
    WeixinJSBridge?: {
      invoke: (method: string, config: any) => void
    }
  }
}

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件

// 认证工具导入 - 用于用户登录状态检查
import { isLoggedIn, getUserInfo } from '../utils/auth'

// ==================== 类型定义 ====================

/**
 * 博客文章详情类型定义
 */
interface BlogPost {
  id: string
  title: string
  content: string
  date: string
  views: number
  readTime: number
  wordCount: number
  category: string
  subcategory: string
  tags: string[]
  likes: number
  isLiked: boolean
  comments: Comment[]
}

/**
 * 评论类型定义
 */
interface Comment {
  id: string
  author: string
  avatar: string
  content: string
  date: string
  likes: number
  isLiked?: boolean
  replies?: Comment[]
}

/**
 * 相关文章类型定义
 */
interface RelatedArticle {
  id: string
  title: string
  excerpt: string
  cover: string
  date: string
  views: number
}

/**
 * 热门标签类型定义
 */
interface PopularTag {
  name: string
  count: number
}

// ==================== 路由和响应式数据 ====================

// 路由实例获取
const route = useRoute()  // 用于获取当前路由参数
const router = useRouter() // 用于编程式导航

// 响应式数据定义
const newComment = ref('') // 新评论内容
const activeHeading = ref('') // 当前激活的标题，用于目录高亮
const isShareExpanded = ref(false) // 分享菜单是否展开

// 认证相关状态
const isUserLoggedIn = ref(isLoggedIn()) // 用户登录状态
const userInfo = ref(getUserInfo()) // 用户信息

// ==================== 模拟数据 ====================

// TODO: 调用后端API获取文章详情数据

/**
 * 博客文章数据
 * @description 从后端API获取的博客文章详细数据，包含文章内容、元数据和评论信息
 */
const blogPost = ref<BlogPost>({
  id: '',
  title: '',
  content: '',
  date: '',
  views: 0,
  readTime: 0,
  wordCount: 0,
  category: '',
  subcategory: '',
  tags: [],
  likes: 0,
  isLiked: false,
  comments: []
})

/**
 * 加载状态
 * @description 控制文章详情加载状态
 */
const isLoading = ref(false)

/**
 * 错误信息
 * @description 存储API调用失败时的错误信息
 */
const errorMessage = ref('')

/**
 * 获取博客文章详情
 * @description 从后端API获取博客文章的详细信息，包括内容、元数据和评论
 */
const fetchBlogDetail = async () => {
  try {
    // 设置加载状态
    isLoading.value = true
    errorMessage.value = ''

    // 从路由参数获取文章ID
    const postId = route.params.id as string
    if (!postId) {
      ElMessage.error('文章ID不存在')
      return
    }

    // 调用API获取文章详情
    const response = await get(API_PATHS.ARTICLE.DETAIL(postId), {
      withAuth: false, // 文章详情不需要认证
      timeout: 10000,  // 10秒超时
      retry: 2         // 失败重试2次
    })

    if (response.success && response.data) {
      // 成功获取数据
      blogPost.value = {
        id: response.data.id || '',
        title: response.data.title || '',
        content: response.data.content || '',
        date: response.data.date || '',
        views: response.data.views || 0,
        readTime: response.data.readTime || 0,
        wordCount: response.data.wordCount || 0,
        category: response.data.category || '',
        subcategory: response.data.subcategory || '',
        tags: response.data.tags || [],
        likes: response.data.likes || 0,
        isLiked: response.data.isLiked || false,
        comments: response.data.comments || []
      }

      console.log('成功获取博客文章详情:', response.data)
    } else {
      // API返回错误
      errorMessage.value = response.error || '获取文章详情失败'
      console.error('获取文章详情失败:', response.error)
      
      // 显示错误提示
      ElMessage.error(errorMessage.value)
      
      // 使用默认数据
      blogPost.value = {
        id: '1',
        title: '深入理解 Vue 3 Composition API 的设计哲学',
        content: `
          <h2 id="introduction">引言</h2>
          <p>Vue 3 的 Composition API 是一个革命性的特性，它改变了我们编写 Vue 组件的方式。本文将深入探讨其设计哲学和实际应用。</p>
          
          <h2 id="design-philosophy">设计哲学</h2>
          <p>Composition API 的设计哲学源于函数式编程的思想，它提供了一种更灵活、更可复用的方式来组织组件逻辑。</p>
          
          <h3 id="benefits">主要优势</h3>
          <ul>
            <li>更好的逻辑复用</li>
            <li>更清晰的代码组织</li>
            <li>更好的 TypeScript 支持</li>
            <li>更小的打包体积</li>
          </ul>
          
          <h2 id="practical-examples">实际应用</h2>
          <p>让我们通过一些实际的例子来理解 Composition API 的强大之处。</p>
          
          <h3 id="custom-hooks">自定义 Hooks</h3>
          <p>通过 Composition API，我们可以创建可复用的逻辑组合函数，类似于 React 的 Hooks。</p>
          
          <h2 id="conclusion">总结</h2>
          <p>Composition API 代表了 Vue 3 的一个重要里程碑，它为 Vue 生态系统带来了新的可能性。</p>
        `,
        date: '2024-01-15',
        views: 2847,
        readTime: 8,
        wordCount: 3200,
        category: '技术',
        subcategory: '前端开发',
        tags: ['Vue.js', 'TypeScript', 'Composition API'],
        likes: 156,
        isLiked: false,
        comments: [
          {
            id: '1',
            author: '李四',
            avatar: '/src/assets/pic/avatar.jpg',
            content: '这篇文章写得非常好，让我对 Composition API 有了更深的理解！',
            date: '2024-01-15 14:30',
            likes: 12
          },
          {
            id: '2',
            author: '王五',
            avatar: '/src/assets/pic/avatar.jpg',
            content: '期待更多关于 Vue 3 的深度文章，感谢分享！',
            date: '2024-01-15 16:45',
            likes: 8
          }
        ]
      }
    }
  } catch (error) {
    // 网络错误或其他异常
    errorMessage.value = error instanceof Error ? error.message : '网络请求失败'
    console.error('获取文章详情异常:', error)
    
    // 显示错误提示
    ElMessage.error('网络连接失败，请检查网络后重试')
    
    // 使用默认数据
    blogPost.value = {
      id: '1',
      title: '深入理解 Vue 3 Composition API 的设计哲学',
      content: `
        <h2 id="introduction">引言</h2>
        <p>Vue 3 的 Composition API 是一个革命性的特性，它改变了我们编写 Vue 组件的方式。本文将深入探讨其设计哲学和实际应用。</p>
        
        <h2 id="design-philosophy">设计哲学</h2>
        <p>Composition API 的设计哲学源于函数式编程的思想，它提供了一种更灵活、更可复用的方式来组织组件逻辑。</p>
        
        <h3 id="benefits">主要优势</h3>
        <ul>
          <li>更好的逻辑复用</li>
          <li>更清晰的代码组织</li>
          <li>更好的 TypeScript 支持</li>
          <li>更小的打包体积</li>
        </ul>
        
        <h2 id="practical-examples">实际应用</h2>
        <p>让我们通过一些实际的例子来理解 Composition API 的强大之处。</p>
        
        <h3 id="custom-hooks">自定义 Hooks</h3>
        <p>通过 Composition API，我们可以创建可复用的逻辑组合函数，类似于 React 的 Hooks。</p>
        
        <h2 id="conclusion">总结</h2>
        <p>Composition API 代表了 Vue 3 的一个重要里程碑，它为 Vue 生态系统带来了新的可能性。</p>
      `,
      date: '2024-01-15',
      views: 2847,
      readTime: 8,
      wordCount: 3200,
      category: '技术',
      subcategory: '前端开发',
      tags: ['Vue.js', 'TypeScript', 'Composition API'],
      likes: 156,
      isLiked: false,
      comments: [
        {
          id: '1',
          author: '李四',
          avatar: '/src/assets/pic/avatar.jpg',
          content: '这篇文章写得非常好，让我对 Composition API 有了更深的理解！',
          date: '2024-01-15 14:30',
          likes: 12
        },
        {
          id: '2',
          author: '王五',
          avatar: '/src/assets/pic/avatar.jpg',
          content: '期待更多关于 Vue 3 的深度文章，感谢分享！',
          date: '2024-01-15 16:45',
          likes: 8
        }
      ]
    }
    
    // 如果是开发环境，显示详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  } finally {
    // 无论成功还是失败，都要清除加载状态
    isLoading.value = false
  }
}

// TODO: 调用后端API获取相关文章数据

/**
 * 相关文章数据
 * @description 从后端API获取的推荐相关文章列表，用于增加用户阅读时长
 */
const relatedArticles = ref<RelatedArticle[]>([])

/**
 * 获取相关文章数据
 * @description 从后端API获取与当前文章相关的推荐文章列表
 */
const fetchRelatedArticles = async () => {
  try {
    // 从路由参数获取文章ID
    const postId = route.params.id as string
    if (!postId) {
      return
    }

    // 调用API获取相关文章
    const response = await get(`${API_PATHS.ARTICLE.DETAIL(postId)}/related`, {
      withAuth: false, // 相关文章不需要认证
      timeout: 8000,   // 8秒超时
      retry: 1         // 失败重试1次
    })

    if (response.success && response.data) {
      // 成功获取数据
      relatedArticles.value = response.data.articles || []
      console.log('成功获取相关文章:', response.data)
    } else {
      // API返回错误，使用默认数据
      relatedArticles.value = [
        {
          id: '2',
          title: 'Vue 3 性能优化最佳实践',
          excerpt: '探讨 Vue 3 应用性能优化的各种技巧和策略...',
          cover: '/src/assets/pic/avatar.jpg',
          date: '2024-01-10',
          views: 1892
        },
        {
          id: '3',
          title: 'TypeScript 在 Vue 3 中的应用',
          excerpt: '如何在 Vue 3 项目中充分利用 TypeScript 的类型系统...',
          cover: '/src/assets/pic/avatar.jpg',
          date: '2024-01-08',
          views: 1567
        }
      ]
      console.error('获取相关文章失败:', response.error)
    }
  } catch (error) {
    // 网络错误或其他异常，使用默认数据
    relatedArticles.value = [
      {
        id: '2',
        title: 'Vue 3 性能优化最佳实践',
        excerpt: '探讨 Vue 3 应用性能优化的各种技巧和策略...',
        cover: '/src/assets/pic/avatar.jpg',
        date: '2024-01-10',
        views: 1892
      },
      {
        id: '3',
        title: 'TypeScript 在 Vue 3 中的应用',
        excerpt: '如何在 Vue 3 项目中充分利用 TypeScript 的类型系统...',
        cover: '/src/assets/pic/avatar.jpg',
        date: '2024-01-08',
        views: 1567
      }
    ]
    console.error('获取相关文章异常:', error)
  }
}

// TODO: 调用后端API获取热门标签数据

/**
 * 热门标签数据
 * @description 从后端API获取的侧边栏热门标签列表，支持点击跳转
 */
const popularTags = ref<PopularTag[]>([])

/**
 * 获取热门标签数据
 * @description 从后端API获取热门标签列表
 */
const fetchPopularTags = async () => {
  try {
    // 调用API获取热门标签
    const response = await get(`${API_PATHS.TAG.LIST}/popular`, {
      withAuth: false, // 热门标签不需要认证
      timeout: 5000,   // 5秒超时
      retry: 1         // 失败重试1次
    })

    if (response.success && response.data) {
      // 成功获取数据
      popularTags.value = response.data.tags || []
      console.log('成功获取热门标签:', response.data)
    } else {
      // API返回错误，使用默认数据
      popularTags.value = [
        { name: 'Vue.js', count: 25 },
        { name: 'React', count: 18 },
        { name: 'TypeScript', count: 15 },
        { name: 'JavaScript', count: 12 },
        { name: 'CSS', count: 10 },
        { name: 'Node.js', count: 8 }
      ]
      console.error('获取热门标签失败:', response.error)
    }
  } catch (error) {
    // 网络错误或其他异常，使用默认数据
    popularTags.value = [
      { name: 'Vue.js', count: 25 },
      { name: 'React', count: 18 },
      { name: 'TypeScript', count: 15 },
      { name: 'JavaScript', count: 12 },
      { name: 'CSS', count: 10 },
      { name: 'Node.js', count: 8 }
    ]
    console.error('获取热门标签异常:', error)
  }
}

/**
 * 文章目录数据
 * @description 根据文章内容生成的目录结构，支持滚动高亮
 */
const tableOfContents = ref([
  { id: 'introduction', title: '引言' },
  { id: 'design-philosophy', title: '设计哲学' },
  { id: 'benefits', title: '主要优势' },
  { id: 'practical-examples', title: '实际应用' },
  { id: 'custom-hooks', title: '自定义 Hooks' },
  { id: 'conclusion', title: '总结' }
])

// ==================== 计算属性 ====================

/**
 * 评论总数
 * @description 计算当前文章的评论总数，用于显示评论数量
 * @returns 评论总数
 */
const totalComments = computed(() => blogPost.value.comments.length)

// ==================== 方法函数 ====================

/**
 * 切换文章点赞状态
 * @description 点击点赞按钮时，调用后端API更新文章的点赞状态并更新点赞数量
 */
const toggleLike = async () => {
  try {
    // 检查用户登录状态
    if (!isUserLoggedIn.value) {
      ElMessage.warning('请先登录后再进行点赞操作')
      return
    }

    // 先更新本地状态，提供即时反馈
    const originalLiked = blogPost.value.isLiked
    const originalLikes = blogPost.value.likes
    
    blogPost.value.isLiked = !blogPost.value.isLiked
    blogPost.value.likes += blogPost.value.isLiked ? 1 : -1

    // 调用后端API更新点赞状态
    const response = await post(API_PATHS.ARTICLE.LIKE(blogPost.value.id), {
      isLiked: blogPost.value.isLiked
    }, {
      withAuth: true, // 点赞需要用户登录
      timeout: 5000,  // 5秒超时
      retry: 1        // 失败重试1次
    })

    if (response.success) {
      // 成功更新点赞状态
      console.log('点赞状态更新成功:', response.data)
      ElMessage.success(blogPost.value.isLiked ? '点赞成功' : '取消点赞成功')
      
      // 如果后端返回了更新后的数据，使用后端数据
      if (response.data && response.data.likes !== undefined) {
        blogPost.value.likes = response.data.likes
      }
      if (response.data && response.data.isLiked !== undefined) {
        blogPost.value.isLiked = response.data.isLiked
      }
    } else {
      // API调用失败，恢复本地状态
      blogPost.value.isLiked = originalLiked
      blogPost.value.likes = originalLikes
      
      const errorMsg = response.error || '点赞操作失败'
      ElMessage.error(errorMsg)
      console.error('点赞操作失败:', response.error)
    }
  } catch (error) {
    // 网络错误或其他异常，恢复本地状态
    blogPost.value.isLiked = !blogPost.value.isLiked
    blogPost.value.likes += blogPost.value.isLiked ? 1 : -1
    
    ElMessage.error('网络连接失败，请稍后重试')
    console.error('点赞操作异常:', error)
    
    // 如果是开发环境，显示详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  }
}

/**
 * 切换分享菜单展开状态
 * @description 点击分享按钮时，切换分享菜单的展开/收起状态
 */
const toggleShareMenu = () => {
  isShareExpanded.value = !isShareExpanded.value
}

/**
 * 关闭分享菜单
 * @description 点击外部区域时关闭分享菜单
 */
const closeShareMenu = () => {
  isShareExpanded.value = false
}

/**
 * 处理点击外部区域事件
 * @description 监听点击事件，如果点击的是分享菜单外部区域，则关闭菜单
 */
const handleClickOutside = (event: Event) => {
  const target = event.target as HTMLElement
  const shareContainer = document.querySelector('.share-container')
  
  if (shareContainer && !shareContainer.contains(target)) {
    closeShareMenu()
  }
}

/**
 * 分享文章到QQ
 * @description 点击QQ分享按钮时的处理逻辑
 */
const shareToQQ = () => {
  const url = window.location.href
  const title = blogPost.value.title
  const desc = blogPost.value.content.substring(0, 100).replace(/<[^>]*>/g, '') || '查看详情'
  const summary = blogPost.value.content.substring(0, 100).replace(/<[^>]*>/g, '') || '查看详情'
  const site = 'https://example.com' // 替换为你的网站域名
  const qqUrl = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&summary=${encodeURIComponent(summary)}&site=${encodeURIComponent(site)}`
  
  // 创建QQ分享弹窗
  const qqModal = document.createElement('div')
  qqModal.className = 'qq-share-modal'
  qqModal.innerHTML = `
    <div class="modal-overlay">
      <div class="modal-content">
        <div class="modal-header">
          <h3>QQ分享</h3>
          <button class="close-btn" onclick="this.parentElement.parentElement.parentElement.remove()">×</button>
        </div>
        <div class="modal-body">
          <div class="share-preview">
            <div class="preview-card">
              <div class="preview-title">${title}</div>
              <div class="preview-desc">${desc}</div>
              <div class="preview-url">${url}</div>
            </div>
          </div>
          <p class="share-tip">点击下方按钮分享到QQ空间或发送给QQ好友</p>
          <div class="share-actions">
            <button class="share-btn qq-space" onclick="window.open('${qqUrl}', '_blank')">
              <div class="btn-icon">📱</div>
              <span>分享到QQ空间</span>
            </button>
            <button class="share-btn qq-friend" onclick="window.open('${qqUrl}', '_blank')">
              <div class="btn-icon">💬</div>
              <span>发送给QQ好友</span>
            </button>
            <button class="copy-link-btn" onclick="navigator.clipboard.writeText('${url}').then(() => alert('链接已复制'))">
              复制链接
            </button>
          </div>
        </div>
      </div>
    </div>
  `
  
  // 添加样式
  const style = document.createElement('style')
  style.id = 'qq-share-modal-style'
  style.textContent = `
    .qq-share-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
    }
    .modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-content {
      background: white;
      border-radius: 12px;
      padding: 24px;
      max-width: 450px;
      width: 90%;
      text-align: center;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .modal-header h3 {
      margin: 0;
      color: #333;
    }
    .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }
    .share-preview {
      margin: 20px 0;
    }
    .preview-card {
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 16px;
      text-align: left;
      margin-bottom: 16px;
    }
    .preview-title {
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      font-size: 16px;
    }
    .preview-desc {
      color: #666;
      font-size: 14px;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    .preview-url {
      color: #999;
      font-size: 12px;
      word-break: break-all;
    }
    .share-tip {
      color: #666;
      margin: 16px 0;
      font-size: 14px;
    }
    .share-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
    }
    .share-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    .share-btn.qq-space {
      background: linear-gradient(135deg, #12b7f5, #0ea5e9);
      color: white;
    }
    .share-btn.qq-friend {
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      color: white;
    }
    .share-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .btn-icon {
      font-size: 18px;
    }
    .copy-link-btn {
      background: #6366f1;
      color: white;
      border: none;
      padding: 12px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    .copy-link-btn:hover {
      background: #4f46e5;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }
  `
  
  document.head.appendChild(style)
  document.body.appendChild(qqModal)
  
  // 关闭弹窗的函数
  const closeModal = () => {
    qqModal.remove()
    const styleElement = document.getElementById('qq-share-modal-style')
    if (styleElement) {
      styleElement.remove()
    }
  }
  
  // 点击遮罩层关闭弹窗
  const overlay = qqModal.querySelector('.modal-overlay')
  if (overlay) {
    overlay.addEventListener('click', (e) => {
      if (e.target === e.currentTarget) {
        closeModal()
      }
    })
  }
  
  // 修改关闭按钮的点击事件
  const closeBtn = qqModal.querySelector('.close-btn')
  if (closeBtn) {
    closeBtn.addEventListener('click', closeModal)
  }
}

/**
 * 分享文章到微信
 * @description 点击微信分享按钮时的处理逻辑
 */
const shareToWeChat = () => {
  const url = window.location.href
  const title = blogPost.value.title
  const desc = blogPost.value.content.substring(0, 100).replace(/<[^>]*>/g, '') || '查看详情'
  
  // 方法1: 使用微信Web分享API (需要微信环境)
  if (typeof window.WeixinJSBridge !== 'undefined') {
    window.WeixinJSBridge.invoke('shareTimeline', {
      title: title,
      desc: desc,
      link: url,
      imgUrl: 'https://example.com/logo.png' // 替换为你的网站logo
    })
    return
  }
  
  // 方法2: 生成二维码供用户扫码分享
  const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`
  
  // 创建二维码弹窗
  const qrModal = document.createElement('div')
  qrModal.className = 'wechat-share-modal'
  qrModal.innerHTML = `
    <div class="modal-overlay">
      <div class="modal-content">
        <div class="modal-header">
          <h3>微信分享</h3>
          <button class="close-btn">×</button>
        </div>
        <div class="modal-body">
          <div class="qr-code-container">
            <img src="${qrCodeUrl}" alt="微信分享二维码" />
          </div>
          <p class="share-tip">请使用微信扫描二维码分享到朋友圈或发送给朋友</p>
          <div class="share-actions">
            <button class="copy-link-btn">
              复制链接
            </button>
          </div>
        </div>
      </div>
    </div>
  `
  
  // 添加样式
  const style = document.createElement('style')
  style.id = 'wechat-share-modal-style'
  style.textContent = `
    .wechat-share-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
    }
    .modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .modal-content {
      background: white;
      border-radius: 12px;
      padding: 24px;
      max-width: 400px;
      width: 90%;
      text-align: center;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .modal-header h3 {
      margin: 0;
      color: #333;
    }
    .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }
    .qr-code-container {
      margin: 20px 0;
    }
    .qr-code-container img {
      width: 200px;
      height: 200px;
      border: 1px solid #eee;
    }
    .share-tip {
      color: #666;
      margin: 16px 0;
      font-size: 14px;
    }
    .share-actions {
      margin-top: 20px;
    }
    .copy-link-btn {
      background: #07c160;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }
    .copy-link-btn:hover {
      background: #06ad56;
    }
  `
  
  document.head.appendChild(style)
  document.body.appendChild(qrModal)
  
  // 关闭弹窗的函数
  const closeModal = () => {
    qrModal.remove()
    const styleElement = document.getElementById('wechat-share-modal-style')
    if (styleElement) {
      styleElement.remove()
    }
  }
  
  // 点击遮罩层关闭弹窗
  const overlay = qrModal.querySelector('.modal-overlay')
  if (overlay) {
    overlay.addEventListener('click', (e) => {
      if (e.target === e.currentTarget) {
        closeModal()
      }
    })
  }
  
  // 修改关闭按钮的点击事件
  const closeBtn = qrModal.querySelector('.close-btn')
  if (closeBtn) {
    closeBtn.addEventListener('click', closeModal)
  }
  
  // 修改复制链接按钮的点击事件
  const copyBtn = qrModal.querySelector('.copy-link-btn')
  if (copyBtn) {
    copyBtn.addEventListener('click', () => {
      navigator.clipboard.writeText(url).then(() => {
        alert('链接已复制')
      }).catch(() => {
        alert('复制失败，请手动复制')
      })
    })
  }
}

/**
 * 复制文章链接
 * @description 点击复制链接按钮时的处理逻辑
 */
const copyArticleLink = () => {
  const url = `${window.location.origin}${route.path}`
  navigator.clipboard.writeText(url).then(() => {
    ElMessage.success('文章链接已复制到剪贴板！')
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制！')
  })
}

/**
 * 提交新评论
 * @description 用户提交新评论时的处理逻辑，包括登录检查和评论添加
 */
const submitComment = async () => {
  // 声明在函数开头，确保在整个函数作用域内可用
  let commentContent = ''
  
  try {
    // 检查用户是否已登录
    if (!isUserLoggedIn.value) {
      ElMessage.warning('请先登录后再发表评论')
      return
    }

    // 检查评论内容是否为空
    if (!newComment.value.trim()) {
      ElMessage.warning('评论内容不能为空')
      return
    }

    // 创建新评论对象（临时添加到本地）
    const tempComment = {
      id: Date.now().toString(),
      author: userInfo.value?.username || '当前用户',
      avatar: userInfo.value?.avatar || '/src/assets/pic/avatar.jpg',
      content: newComment.value,
      date: new Date().toLocaleString(),
      likes: 0
    }

    // 先将评论添加到本地，提供即时反馈
    blogPost.value.comments.unshift(tempComment)
    commentContent = newComment.value
    newComment.value = '' // 清空输入框

    // 调用后端API提交评论
    const response = await post(API_PATHS.ARTICLE.COMMENTS(blogPost.value.id), {
      content: commentContent
    }, {
      withAuth: true, // 提交评论需要用户登录
      timeout: 8000,  // 8秒超时
      retry: 1        // 失败重试1次
    })

    if (response.success && response.data) {
      // 成功提交评论
      console.log('评论提交成功:', response.data)
      ElMessage.success('评论发表成功')
      
      // 使用后端返回的评论数据替换临时评论
      const serverComment = response.data.comment
      const commentIndex = blogPost.value.comments.findIndex(c => c.id === tempComment.id)
      if (commentIndex !== -1 && serverComment) {
        blogPost.value.comments[commentIndex] = {
          id: serverComment.id || tempComment.id,
          author: serverComment.author || tempComment.author,
          avatar: serverComment.avatar || tempComment.avatar,
          content: serverComment.content || tempComment.content,
          date: serverComment.date || tempComment.date,
          likes: serverComment.likes || 0
        }
      }
    } else {
      // API调用失败，移除临时评论
      blogPost.value.comments.shift()
      newComment.value = commentContent // 恢复评论内容
      
      const errorMsg = response.error || '评论发表失败'
      ElMessage.error(errorMsg)
      console.error('评论提交失败:', response.error)
    }
  } catch (error) {
    // 网络错误或其他异常，移除临时评论
    blogPost.value.comments.shift()
    newComment.value = commentContent // 恢复评论内容
    
    ElMessage.error('网络连接失败，请稍后重试')
    console.error('评论提交异常:', error)
    
    // 如果是开发环境，显示详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  }
}

/**
 * 点赞评论
 * @param commentId 评论ID
 * @description 点击评论点赞按钮时，调用后端API增加该评论的点赞数
 */
const likeComment = async (commentId: string) => {
  try {
    // 检查用户登录状态
    if (!isUserLoggedIn.value) {
      ElMessage.warning('请先登录后再进行点赞操作')
      return
    }

    // 查找评论
    const comment = blogPost.value.comments.find(c => c.id === commentId)
    if (!comment) {
      ElMessage.error('评论不存在')
      return
    }

    // 先更新本地状态，提供即时反馈
    const originalLikes = comment.likes
    comment.likes++

    // 调用后端API点赞评论
    const response = await post(`${API_PATHS.ARTICLE.COMMENTS(blogPost.value.id)}/${commentId}/like`, {
      isLiked: true
    }, {
      withAuth: true, // 点赞评论需要用户登录
      timeout: 5000,  // 5秒超时
      retry: 1        // 失败重试1次
    })

    if (response.success) {
      // 成功点赞评论
      console.log('评论点赞成功:', response.data)
      ElMessage.success('点赞成功')
      
      // 如果后端返回了更新后的数据，使用后端数据
      if (response.data && response.data.likes !== undefined) {
        comment.likes = response.data.likes
      }
    } else {
      // API调用失败，恢复本地状态
      comment.likes = originalLikes
      
      const errorMsg = response.error || '点赞操作失败'
      ElMessage.error(errorMsg)
      console.error('评论点赞失败:', response.error)
    }
  } catch (error) {
    // 网络错误或其他异常，恢复本地状态
    const comment = blogPost.value.comments.find(c => c.id === commentId)
    if (comment) {
      comment.likes--
    }
    
    ElMessage.error('网络连接失败，请稍后重试')
    console.error('评论点赞异常:', error)
    
    // 如果是开发环境，显示详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  }
}

/**
 * 回复评论
 * @param commentId 评论ID
 * @description 点击评论回复按钮时，调用后端API回复评论
 */
const replyToComment = async (commentId: string) => {
  try {
    // 检查用户登录状态
    if (!isUserLoggedIn.value) {
      ElMessage.warning('请先登录后再进行回复操作')
      return
    }

    // 查找要回复的评论
    const parentComment = blogPost.value.comments.find(c => c.id === commentId)
    if (!parentComment) {
      ElMessage.error('评论不存在')
      return
    }

    // 这里可以实现一个回复对话框，让用户输入回复内容
    // 为了简化，我们使用一个简单的prompt
    const replyContent = prompt(`回复 ${parentComment.author} 的评论:`)
    if (!replyContent || !replyContent.trim()) {
      return
    }

    // 创建临时回复对象
    const tempReply = {
      id: Date.now().toString(),
      author: userInfo.value?.username || '当前用户',
      avatar: userInfo.value?.avatar || '/src/assets/pic/avatar.jpg',
      content: replyContent,
      date: new Date().toLocaleString(),
      likes: 0
    }

    // 将回复添加到评论的回复列表中
    if (!parentComment.replies) {
      parentComment.replies = []
    }
    parentComment.replies.push(tempReply)

    // 调用后端API提交回复
    const response = await post(`${API_PATHS.ARTICLE.COMMENTS(blogPost.value.id)}/${commentId}/reply`, {
      content: replyContent
    }, {
      withAuth: true, // 回复评论需要用户登录
      timeout: 8000,  // 8秒超时
      retry: 1        // 失败重试1次
    })

    if (response.success && response.data) {
      // 成功提交回复
      console.log('回复提交成功:', response.data)
      ElMessage.success('回复发表成功')
      
      // 使用后端返回的回复数据替换临时回复
      const serverReply = response.data.reply
      const replyIndex = parentComment.replies!.findIndex(r => r.id === tempReply.id)
      if (replyIndex !== -1 && serverReply) {
        parentComment.replies![replyIndex] = {
          id: serverReply.id || tempReply.id,
          author: serverReply.author || tempReply.author,
          avatar: serverReply.avatar || tempReply.avatar,
          content: serverReply.content || tempReply.content,
          date: serverReply.date || tempReply.date,
          likes: serverReply.likes || 0
        }
      }
    } else {
      // API调用失败，移除临时回复
      parentComment.replies!.pop()
      
      const errorMsg = response.error || '回复发表失败'
      ElMessage.error(errorMsg)
      console.error('回复提交失败:', response.error)
    }
  } catch (error) {
    // 网络错误或其他异常，移除临时回复
    const parentComment = blogPost.value.comments.find(c => c.id === commentId)
    if (parentComment && parentComment.replies) {
      parentComment.replies.pop()
    }
    
    ElMessage.error('网络连接失败，请稍后重试')
    console.error('回复提交异常:', error)
    
    // 如果是开发环境，显示详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  }
}

/**
 * 导航到指定文章
 * @param articleId 文章ID
 * @description 点击相关文章时，跳转到对应的文章详情页
 */
const navigateToArticle = (articleId: string) => {
  router.push(`/blog-detail/${articleId}`)
}

/**
 * 处理侧边栏标签点击事件
 * @param tagName 标签名称
 * @description 点击侧边栏热门标签时，跳转到标签页面
 */
const handleTagClick = (tagName: string) => {
  console.log('标签点击:', tagName) // 调试信息
  // 跳转到标签页面
  router.push(`/tag/${tagName}`)
}

/**
 * 处理文章标题下标签点击事件
 * @param tagName 标签名称
 * @description 点击文章标题下的标签时，跳转到标签页面
 */
const handleArticleTagClick = (tagName: string) => {
  console.log('文章标签点击:', tagName) // 调试信息
  // 跳转到标签页面
  router.push(`/tag/${tagName}`)
}

/**
 * 跳转到登录页面
 * @description 未登录用户点击登录按钮时，跳转到登录页面
 */
const goToLogin = () => {
  router.push('/login')
}

/**
 * 社交登录处理
 * @param platform 社交平台类型
 * @description 处理不同社交平台的登录逻辑
 */
const socialLogin = (platform: 'qq' | 'wechat' | 'github') => {
  console.log('社交登录:', platform)
  // 这里可以实现具体的社交登录逻辑
  // 暂时跳转到登录页面
  router.push(`/login?platform=${platform}`)
}

/**
 * 监听滚动事件，更新当前激活的标题
 * @description 监听页面滚动，根据当前可视区域更新目录中的高亮项
 */
const handleScroll = () => {
  const headings = document.querySelectorAll('h2, h3')
  let currentHeading = ''

  headings.forEach((heading) => {
    const rect = heading.getBoundingClientRect()
    if (rect.top <= 100) {
      currentHeading = heading.id
    }
  })

  activeHeading.value = currentHeading
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时的初始化
 * @description 组件挂载时添加滚动监听器，用于目录高亮功能，并获取页面数据
 */
onMounted(() => {
  // 获取博客文章详情
  fetchBlogDetail()
  
  // 获取相关文章数据
  fetchRelatedArticles()
  
  // 获取热门标签数据
  fetchPopularTags()
  
  // 添加滚动监听器
  window.addEventListener('scroll', handleScroll)
  document.addEventListener('click', handleClickOutside)
})

/**
 * 组件卸载时的清理
 * @description 组件卸载时移除滚动监听器，防止内存泄漏
 */
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped lang="scss">
// 导入博客详情页组件样式
@use '../assets/styles/clients/_blog-detail';
</style>